<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" style="width:160px">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="formInline.type" style="width:160px" @change="typeChange">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input  clearable placeholder="请输入卡号" v-model="formInline.card_no" style="width:160px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input clearable placeholder="请输入手机号" v-model="formInline.phone" style="width:160px"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 权限tap标签分类 -->
            <el-row>
                <el-col :span="24" class="page_tab">
                    <el-tabs v-model="type_url" @tab-click="tabClick" stretch>
                        <el-tab-pane label="柜台存票" name="1" v-if="type == 2"></el-tab-pane>
                        <el-tab-pane label="柜台/小程序存票" name="1" v-else></el-tab-pane>
                        <el-tab-pane label="存票机存票" name="2"></el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <transition name="fade" mode="out-in">
                <el-table  highlight-current-row show-summary :key="type_url" v-loading.body="listLoading" :data="list" size="small"
                    border :summary-method="getSummaries">
                    <el-table-column align="center" prop="date_create" label="日期"></el-table-column>
                    <el-table-column align="center" prop="tickets" label="存票数量"> </el-table-column>
                    <el-table-column v-if="type_url==1" align="center" prop="from" label="存票来源"></el-table-column>
                    <el-table-column align="center" prop="card_no" label="会员卡号"></el-table-column>
                     <el-table-column align="center" prop="user_name" label="姓名" v-if="type == 2"></el-table-column>
                    <el-table-column align="center" prop="user_name" label="昵称" v-else></el-table-column>
                    <el-table-column align="center" prop="mobile" label="手机"></el-table-column>
                    <el-table-column v-if="type_url==1" align="center" prop="emp_name" label="操作员工"></el-table-column>
                </el-table>
            </transition>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getStoreList,
    } from "@/api/member/save_detail";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils'
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                storeList: [],
                typeList: [{ id: '2', name: '线下实体卡'}, { id: '1', name: '小程序电子卡'}],
                formInline: {
                    store_id: '',
                    end_time: '',
                    begin_time: '',
                    type: '2',
                    card_no: '',
                    phone: ''
                },
                type:'2',
                type_url: '1',
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        created() {
            this.getStore()
        },
        methods: {
            typeChange(){
                this.searchClick()
            },
            tabClick() {
                this.searchClick()
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    const values = data.map(item => Number(item[column.property]));
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    if (index == 1) {
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            sums[index] = (sums[index] * 1).toFixed(2) * 1;
                        }
                    } else {
                        sums[index] = '-'
                    }
                });
                return sums;
            },
            getStore() {
                getStoreList({ brand: this.formInline.brand, category_id: 349 }).then(response => {
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    }
                    this.storeList = response;
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.type = this.formInline.type;
                this.listLoading = true;
                getList(this.formInline,this.type_url).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
   .page_tab{
       background-color: #fff;
       margin-bottom:15px;
       .el-tabs {
           width: 20%;
           & /deep/ .el-tabs__header{
                margin-bottom: 0;
            }
            & /deep/ .el-tabs__nav-wrap::after{
                background-color: #fff;
            }
       }
   }
</style>